<template>
  <div class="box-vertical body">
    <div class="box-standard box1 box-border" style="justify-content: space-around">
      <div class="img">
      </div>
      <div class="box-vertical" style="height: 100%;justify-content: space-around">
        <div>
          <h2>基于QEMU嵌入式Linux系统虚拟仿真环境的构建实验</h2>
        </div>
        <div class="box-standard" style="width: 500px;justify-content: space-around">
          <div>相关知识 | 操作手册
          </div>
          <div class="box-standard">
            <div>
              <el-button type="primary">
                <a style="text-direction: none;" href="/operatingSheet.pdf">下载操作手册</a>
              </el-button>
              <p class="notation">
                当前下载量:{{downloadNum}}
              </p>
            </div>
            <div style="padding: 10px 20px;">
              <el-button type="primary" @click="getHostAccount">
                仿真操作
              </el-button>
              <p class="notation">
                当前获取量:{{operatingNum}}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box2 box-border">
      <el-tabs v-model="activeName">
        <el-tab-pane label="课程介绍" name="first" class="box-vertical">
          <div class="sub-artical" style="padding-left: 20px;padding-right: 20px;">
            <h4>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;嵌入式操作系统实验是计算机科学与技术专业的一门重要专业主修课，是一门主干课程。该课程主要是介绍带操作系统的嵌入式系统。
              其主要内容有：Cortex-A ARM体系，ARM体系汇编及编程原理，ARM体系接口原理，嵌入式Linux操作系统原理、移植，驱动程序原理及开发等。
            </h4>
          </div>
          <ul>
            <li>
              <div class="sub-title elastic-box">
                课程教学目标和能力要求
              </div>
              <div>
                <div>
                  <h5>
                    表1  毕业要求指标点与课程目标（Course Object，CO）对应关系
                  </h5>
                </div>
                <el-table
                  :data="requireTable"
                  border
                  style="width: 100%">
                  <el-table-column
                    type="index"
                    label="序号"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="毕业要求指标点"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="target"
                    label="课程目标"
                    width="250">
                  </el-table-column>
                  <el-table-column
                    prop="remark"
                    label="备注"
                    width="250">
                  </el-table-column>
                </el-table>
              </div>
              <div>
                <p>本课程的教学目的是让学生掌握基于ARM-Linux嵌入式系统的原理及构建方法，通过学习，使学生能够从事基于ARM-Linux嵌入式系统的软硬件开发工作，具体在知识、能力、素质方面达到如下目标要求：</p>
                <p>知识要求：掌握基于ARM-Linux嵌入式系统的原理及构建方法，能够熟练开发基于ARM-Linux嵌入式系统的设备驱动程序，熟悉熟悉基于ARM体系的汇编、接口及中断等原理。</p>
                <p>能力要求：具有开发基于ARM-Linux嵌入式系统的软硬件开发的能力。</p>
                <p>素质要求：培养对嵌入式系统的全栈有深刻理解，进而培养对计算机系统的认知。</p>
              </div>
            </li>
            <li>
              <div class="sub-title">
                课程教学方法
              </div>
              <div>
                <p>本课程教学方法以课堂教学法为主，实验为辅。在理论教学中尽量采用多媒体教学手段，注重课堂教学过程中教与学的互动性。实验课程采用实验室和仿真两种手段，需有延续性，能够贯穿整个教学活动。</p>
              </div>
            </li>
            <li>
              <div class="sub-title">
                课程内容及教学安排
              </div>
              <div>
                <div>
                  <h5>
                    表2 课程知识单元、教学内容（知识点）、学时分配及课程目标对应关系
                  </h5>
                </div>
                <el-table
                  :data="planTable"
                  :summary-method="planTableSummary"
                  show-summary
                  border
                  style="width: 100%">
                  <el-table-column
                    type="index"
                    label="序号"
                    width="50">
                  </el-table-column>
                  <el-table-column
                    prop="unit"
                    label="知识单元"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="knowledge"
                    label="知识点及要求"
                    width="250">
                  </el-table-column>
                  <el-table-column
                    prop="assignment"
                    label="学时分配（理论/实践）"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="target"
                    label="对应课程目标"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="require"
                    label="作业要求"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="way"
                    label="教学方法"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="remark"
                    label="备注"
                    width="100">
                  </el-table-column>
                </el-table>
                <p class="sub-artical">
                  （注：1. 知识点及要求须通过“了解”、“熟悉”、“掌握”等词汇来描述；2. 作业要求写明何种类型题目、几道题目，无需写出具体内容；3. 授课方式指包括教师讲授、师生研讨、网络学习、分组讨论、实践教学等。）
                </p>
              </div>
              <div class="sub-margin">
                <div>
                  <h5>
                    表3 课内实验/实践单元、教学内容（知识点）、学时分配及课程目标对应关系
                  </h5>
                </div>
                <div>
                  <el-table
                    :data="relationTable"
                    border
                    :summary-method="relationTableSummary"
                    show-summary
                    style="width: 100%">
                    <el-table-column
                      type="index"
                      label="序号"
                      width="50">
                    </el-table-column>
                    <el-table-column
                      prop="unit"
                      label="实验/实践单元"
                      width="150">
                    </el-table-column>
                    <el-table-column
                      prop="knowledge"
                      label="知识点及要求"
                      width="300">
                    </el-table-column>
                    <el-table-column
                      prop="type"
                      label="实验/实践类型"
                      width="50">
                    </el-table-column>
                    <el-table-column
                      prop="asignment"
                      label="学时分配"
                      width="50">
                    </el-table-column>
                    <el-table-column
                      prop="target"
                      label="对应课程目标"
                      width="50">
                    </el-table-column>
                    <el-table-column
                      prop="num"
                      label="每组人数"
                      width="50">
                    </el-table-column>
                    <el-table-column
                      prop="require"
                      label="实验要求"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      prop="remark"
                      label="备注"
                      width="100">
                    </el-table-column>
                  </el-table>
                </div>
                <div>
                  <p>
                    （注：1. 知识点及要求须通过“了解”、“熟悉”、“掌握”等词汇来描述；2. 实验/实践类型包括演示性、验证性、综合性、设计性、研究性等；3. 实验要求包括必做、选做。）
                  </p>
                </div>
              </div>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="相关知识" name="second">
          <div class="box-vertical">
            <div class="sub-title sub-margin">
              相关知识点
            </div>
            <div class="sub-margin sub-artical">
              <h3>一、VMware Workstation虚拟机</h3>
              <p>
                VMware Workstation虚拟机是可以在Windows/Linux系统上运行的应用程序，它可以模拟基于x86的标准PC环境。这个环境和真实的计算机一样，都有芯片组、CPU、内存、显卡、声卡、网卡、软驱、硬盘、光驱、串口、并口、USB控制器、SCSI控制器等设备。VMWare虚拟机软件是一个“虚拟PC”软件，它可以使你在一台机器上同时运行多个Windows、DOS、LINUX系统，并且在系统切换时不需要重启计算机。
              </p>
            </div>
            <div class="sub-margin sub-artical">
              <h3>二、QEMU模拟器</h3>
              <p>
                QEMU模拟器是一个开源的通用软件仿真器，使用动态翻译技术，可以在宿主机上模拟出另外一种体系结构客户机计算机系统，从而可以在宿主机上运行客户机操作系统和应用程序；QEMU既支持通用计算机体系结构，也支持ARM，MIPS，PowerPC，SPARC，ColdFire，MicroBlaze，Xtensa等多种嵌入式体系结构，其支持的ARM处理器数量有50多种；QEMU使用了多种优化技术，极大提高了仿真速度；QEMU自1.3.0版之后正式整合KVM，使其同时也成为一款优秀的虚拟机软件。
              </p>
            </div>
            <div class="sub-margin sub-artical">
              <h3>三、嵌入式Linux系统的结构</h3>
              <p>
                嵌入式Linux系统从软件的角度看通常可以分为4个层次：
              </p>
              <ol>
                <li>引导加载程序Bootloader。</li>
                <li>内核。完成对硬件设备的控制，Linux内核的主要模块分为以下几个部分：存储管理、CPU和进程管理、文件系统、设备管理和驱动、网络通信、以及系统的初始化（引导）、系统调用等。</li>
                <li>文件系统。它提供了用于管理系统的各种配置文件，以及为系统执行用户应用程序提供了良好的运行环境。</li>
                <li>用户应用程序。根据不同的用户需求而编写的程序。</li>
              </ol>
            </div>
            <div class="sub-margin sub-artical">
              <h3>四、QEMU与宿主机之间的通信机制</h3>
              <p>
                QEMU提供了四种网络通信模式：TAP、user、Sockets和VDE。利用user模式可以实现虚拟机和宿主机之间的通信且较为简单易行，在这种通信模式中，虚拟机处于10.0.2.*网段，该网段通过一个NAT服务器与外界通信，NAT服务器的地址是10.0.2.2，虚拟机的IP地址从10.0.2.15开始分配。
              </p>
              <p>
                本实验项目构建基于QEMU模拟器的嵌入式Linux系统虚拟仿真环境，能够仿真ARM公司 Cortex-A9开发板。在安装QEMU 模拟器之前安装交叉编译工具链，满足交叉编译的要求，然后安装相应的依赖库以满足QEMU的正常运行。
              </p>
            </div>
            <div class="text-box">
              <div class="sub-margin sub-title">
                知识点：共7个
              </div>
              <div class="sub-margin sub-artical">
                <ul class="no-liststyle">
                  <li>（1）VMware虚拟机类型</li>
                  <li>（2）QEMU模拟器</li>
                  <li>（3）交叉编译原理</li>
                  <li>（4）Bootloader启动代码</li>
                  <li>（5）Linux系统内核</li>
                  <li>（6）构建基本文件系统</li>
                  <li>（7）NFS网络文件系统</li>
                </ul>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <div>
        <div class="block">
          <el-timeline>
            <el-timeline-item timestamp="2018/4/3" placement="top">
              <el-card>
                <h4>请确认已下载工具</h4>
                <ul>
                  <li><a href="https://www.netsarang.com/zh/xshell-download/">Xshell</a></li>
                  <li><a href="https://www.filezilla.cn/download">FileZilla</a></li>
                </ul>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2018/4/12" placement="top">
              <el-card>
                <h4>当前账号</h4>
                <table>
                  <tr>
                    <td>用户名</td>
                    <td>{{activities[0].username}}</td>
                  </tr>
                  <tr>
                    <td>密码</td>
                    <td>{{activities[0].password}}</td>
                  </tr>
                  <tr>
                    <td>主机地址</td>
                    <td>{{activities[0].ip}}</td>
                  </tr>
                </table>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2018/4/2" placement="top">
              <el-card>
                <h4>请仔细阅读操作手册</h4>
                <p>操作手册</p>
                <b>注意:</b>账号的有效期约为3个小时
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "OldMain",
    data() {
      return {
        activeName: "first",
        dialogVisible: false,
        downloadNum:'',
        operatingNum:'',
        activities: [{
          content: '正在获取账号',
          username: '',
          password: '',
          ip: '',
          timestamp: '2018-04-15'
        }, {
          content: '请阅读操作操作手册',
          timestamp: '2018-04-13'
        }],
        requireTable:[
          {
            name:'工程知识',
            target:'CO1：掌握基于ARM体系的汇编原理和编程，掌握交叉开发环境的搭建。',
            remark:''
          },
          {
            name:'工程知识',
            target:'CO2：掌握基于ARM体系的接口原理与编程，理解计算机接口编程原理。',
            remark:''
          },
          {
            name:'工程知识',
            target:'CO3：掌握基于ARM-Linux嵌入式系统的操作系统的构成与原理，理解带操作系统的嵌入式系统。',
            remark:''
          },
          {
            name:'分析问题',
            target:'CO4：掌握嵌入式ARM-Linux操作系统相关部分的移植方法，学会分析软硬件系统的方法。',
            remark:''
          },
          {
            name:'研究',
            target:'CO5：掌握基于ARM-Linux操作系统的设备驱动的开发方法，理解嵌入式设备的驱动开发方法，初步掌握驱动设计中的优化方法。',
            remark:''
          }
        ],
        planTable:[
          {
            unit:'ARM体系汇编及编程',
            knowledge:'知识点：ARM体系基本概念，ARM指令系统，ARM汇编及编程，开发环境的构建，交叉开发原理。\n' +
              '要求：理解ARM的寻址方式，掌握汇编指令及编程方法。',
            assignment:'4/4',
            target:'CO1',
            require:'3小时',
            way:'讲授',
            remark:''
          },
          {
            unit:'ARM体系接口原理',
            knowledge:'知识点：常见ARM接口及原理。\n' +
              '要求：掌握常见ARM体系接口原理及控制接口的方法。',
            assignment:'8/8',
            target:'CO2',
            require:'2小时',
            way:'讲授',
            remark:''
          },
          {
            unit:'Linux操作系统基本原理',
            knowledge:'知识点：嵌入式Linux操作系统组成、原理。\n' +
              '要求：理解ARM-Linux操作系统的构成，理解BootLoader、根文件系统、内核的作用及原理。',
            assignment:'8/8',
            target:'CO3',
            require:'3小时',
            way:'讲授',
            remark:''
          },
          {
            unit:'Linux操作系统构建',
            knowledge:'ARM-Linux操作系统的移植，BootLoader移植，根文件系统移植，内核移植。\n' +
              '要求：掌握嵌入式ARM-Linux操作系统相关部分的移植方法，学会分析软硬件系统的方法。',
            assignment:'8/8',
            target:'CO4',
            require:'3小时',
            way:'讲授',
            remark:''
          },
          {
            unit:'嵌入式Linux驱动原理及开发',
            knowledge:'知识点：ARM-Linux驱动原理，ARM-Linux驱动开发方法。\n' +
              '要求：掌握ARM-Linux驱动原理及开发方法，初步掌握驱动设计中的优化方法。',
            assignment:'4/4',
            target:'CO5',
            require:'2小时',
            way:'讲授',
            remark:''
          }
        ],
        relationTable:[
          {
            unit:'ARM体系汇编及编程实验',
            knowledge:'知识点：ARM体系指令系统及汇编。\n' +
              '要求：理解ARM的寻址方式，掌握汇',
            type:'实验室',
            asignment:'8',
            target:'CO1',
            num:'1-2',
            require:'完成汇编、交叉开发环境搭建',
            remark:''
          },
          {
            unit:'ARM体系接口原理实验',
            knowledge:'知识点：常见ARM接口及原理。\n' +
              '要求：掌握常见ARM体系接口原理及控制接口的方法。',
            type:'实验室',
            asignment:'8',
            target:'CO2',
            num:'1-2',
            require:'完成常用接口的编程。',
            remark:''
          },
          {
            unit:'Linux操作系统基本实验',
            knowledge:'知识点：ARM-Linux操作系统的组成，BootLoader，根文件系统，内核。\n' +
              '要求：理解ARM-Linux操作系统的构成，理解BootLoader、根文件系统、内核的作用及原理。',
            type:'实验室',
            asignment:'4',
            target:'CO3',
            num:'1-2',
            require:'完成嵌入式Linux及Uboot的基本命令操作',
            remark:''
          },
          {
            unit:'嵌入式Linux操作系统移植实验',
            knowledge:'知识点：BootLoader移植，根文件系统移植，内核移植。\n' +
              '要求：掌握BootLoader、根文件系统、内核移植原理和方法。',
            type:'实验室',
            asignment:'8',
            target:'CO4',
            num:'1-2',
            require:'完成Uboot、Linux内核、根文件系统的制作',
            remark:''
          },
          {
            unit:'嵌入式Linux驱动实验',
            knowledge:'知识点：ARM-Linux驱动原理，ARM-Linux驱动开发方法\n' +
              '要求：掌握ARM-Linux驱动原理及开发方法',
            type:'实验室',
            asignment:'6',
            target:'CO5',
            num:'1-2',
            require:'完成一个设备的驱动程序开发',
            remark:''
          }
        ]
      };
    },
    methods:{
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      getHostAccount(){
        let data = this.$data;
        let qs = require("qs");
        if(data.activities[0].username != ""){
          data.dialogVisible = true;
          return ;
        }
        this.axios.post("/hostaccount/gethostaccount")
          .then(response => {
            let resData = response.data;
            if(resData.errCode != 200){
              this.$message({
                message: resData.errMsg,
                type: "success"
              });
            }else{
              data.dialogVisible = true;
              resData = resData.data;
              data.activities[0].username = resData.username;
              data.activities[0].password = resData.password;
              data.activities[0].ip = resData.host.ip;
              this.operatingCount();
            }
          })
      },
      downloadCount:function () {
        this.axios.post("/statistic/download")
      },
      operatingCount:function () {
        this.axios.post("/statistic/operating")
      },
      planTableSummary:function(){
        return ['合计','-','-','32/32','-','-','-','-']
      },
      relationTableSummary:function(){
        return ['合计','-','-','32','-','-','-','-','-']
      }
    },
    created:function(){
      let data = this.$data;
      const qs = require("qs");
      this.axios.post('/statistic/getall')
        .then(response => {
          let resData = response.data;
          if(resData.errCode == 200){
            data.downloadNum = resData.data[0].count;  //downloadNum
            data.operatingNum = resData.data[1].count;  //operatingNum
          }else{
            alert(resData.errMsg);
          }
        })
    }
  }
</script>

<style scoped>
  .body{
    width: 100%;
    height: 100%;
    background-color: #f2f2f2;
  }
  .box1{
    width: 1000px;
    height: 200px;
  }
  .img{
    margin: 10px;
    width: 300px;
    height: 180px;
    background-image: url("assets/images/linux.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .box2{
    width: 1000px;
    height: 100%;
  }
  .notation{
    font-size: 10px;
    color: #9e9e9e;
    position: absolute;
    text-align: center;
  }
</style>
